<template>
  <div>
    <div class="pages">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="tableData.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="primary" style="background-color: firebrick" icon="el-icon-refresh" @click="listuser">重置</el-button>
        </el-form-item>
        <el-form-item>
          <download-excel
            :data   = "allTableData"
            :fields = "json_fields"
            name = "用户统计列表">
            <el-button type="primary" style="background-color: navy" icon="el-icon-bottom">导出</el-button>
          </download-excel>
        </el-form-item>
      </el-form>
    </div>
        <el-table
          :data="tableData"
          style="width: 100%;color: black">
          <el-table-column
            label="用户编号"
           >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.uid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户名"
          >
            <template slot-scope="scope">
              <span style="color: red;margin-right: 10px">{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="密码"
           >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.password }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户昵称"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户性别">
            <template slot-scope="scope">
              <span v-if="scope.row.sex==1" style="color:green;">男</span>
              <span v-if="scope.row.sex==2" style="color:fuchsia;">女</span>
              <span v-if="scope.row.sex==3" style="color:red">保密</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户邮箱"
            >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户手机号"
            >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户部门"
           >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户角色"
            >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.rolename }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="用户状态"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.status==0" style="color:green;">正常</span>
              <span v-if="scope.row.status==1" style="color:red;">禁用</span>
              <span v-if="scope.row.status==2" style="color:firebrick;">异常</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.uid)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.uid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginations.page_index"
        :page-sizes="paginations.page_sizes"
        :page-size="paginations.page_size"
        :layout="paginations.layout"
        :total="paginations.total">
      </el-pagination>
    </div>
      <div>
        <el-dialog title="修改用户页面" :visible.sync="dialogVisible">
          <el-form :model="input">
            <el-form-item label="用户角色" :label-width="formLabelWidth">
              <el-radio-group v-model="input.jueseid">
                <el-radio :label="1">超级管理</el-radio>
                <el-radio :label="2">财务管理</el-radio>
                <el-radio :label="3">客服管理</el-radio>
                <el-radio :label="4">工程管理</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户编号" :label-width="formLabelWidth">
              <el-input v-model="input.uid"  readonly></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="input.username"  readonly></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="input.password"  readonly></el-input>
            </el-form-item>
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-input v-model="input.nickname"  readonly></el-input>
            </el-form-item>
            <el-form-item label="用户性别" :label-width="formLabelWidth">
              <el-radio-group v-model="input.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
                <el-radio :label="3">保密</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户邮箱" :label-width="formLabelWidth">
              <el-input v-model="input.email" readonly></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="input.phone"  readonly></el-input>
            </el-form-item>
            <el-form-item label="用户所属部门" :label-width="formLabelWidth">
              <el-radio-group v-model="input.deptid">
                <el-radio :label="1">董事长</el-radio>
                <el-radio :label="2">经理部</el-radio>
                <el-radio :label="3">开发部</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户状态" :label-width="formLabelWidth">
              <el-radio-group v-model="input.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">禁用</el-radio>
                <el-radio :label="2">异常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateuser">确 定</el-button>
          </div>
        </el-dialog>
      </div>
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
      json_fields: { // 导出Excel表格的表头设置
        编号: 'uid',
        用户名: 'username',
        密码: 'password',
        昵称: 'nickname',
        性别编号: 'sex',
        邮箱: 'email',
        电话: 'phone',
        部门编号: 'name',
        状态编号: 'status',
        角色编号: 'rolename'
      },
      formLabelWidth: '120px',
      tableData: [],
      dialogVisible: false,
      input: {},
      paginations: {
        page_index: 1, // 当前页
        total: 0, // 总数
        page_size: 5, // 一页显示多少
        page_sizes: [4, 8, 12, 16], // 每页显示多少条
        layout: 'total, sizes, prev, pager, next, jumper'
      },
      allTableData: []
    }
  },
  mounted () {
    this.listuser()
  },
  methods: {
    async onSubmit () {
      if (this.tableData.nickname === '' || this.tableData.nickname === null || this.tableData.nickname === undefined) {
        this.$message({
          message: '请输入搜索昵称',
          type: 'warning'
        })
      } else {
        const { data } = await this.$axios.post('/likelist', {
          nickname: this.tableData.nickname
        })
        this.allTableData = data.likelists
        this.setPaginations()
      }
    },
    setPaginations () {
      this.paginations.total = this.allTableData.length // 数据的数量
      this.paginations.page_index = 1 // 默认显示第一页
      this.paginations.page_size = 8 // 每页显示多少数据

      // 显示数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size
      })
    },
    handleSizeChange (pagesize) {
      this.paginations.page_index = 1 // 第一页
      this.paginations.page_size = pagesize // 每页先显示多少数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < pagesize
      })
    },
    handleCurrentChange (page) {
      // 跳转页数
      // 获取当前页
      const index = this.paginations.page_size * (page - 1)
      // 获取总数
      const allData = this.paginations.page_size * page

      const tablist = []
      for (let i = index; i < allData; i++) {
        if (this.allTableData[i]) {
          tablist.push(this.allTableData[i])
        }
        this.tableData = tablist
      }
    },
    async updateuser () {
      const { data: res } = await this.$axios.post('/updateuser', this.input)
      console.log(res)
      if (res === 'success') {
        this.dialogVisible = false
        this.listuser()
      } else {
        this.$message({
          message: '抱歉,亲编辑时遇到了一些问题',
          type: 'warning'
        })
      }
    },
    async listuser () {
      const { data: res } = await this.$axios.post('/listbiao')
      console.log(res)
      const a = Array.from(res.userbiao)
      console.log(a)
      this.allTableData = a // 将查询到的数据放到allTableData数组中
      this.setPaginations() // 执行该方法
    },
    async handleEdit (row) {
      this.dialogVisible = true
      const { data: res } = await this.$axios.post('/upiduser', {
        uid: row
      })
      this.input = res
    },
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/deluser', {
          uid: row
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.listuser()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        this.listuser()
      })
    }
  }
}
</script>

<style scoped>
.page {
  float: right;
  margin-top: 20px;
}
.pages {
  float: left;
}
</style>
